<template>
	<view class="content">
		<view class="orderInfo">
			<image :src="data.cover" class="poster"></image>
			<text class="name">
				{{data.serve_name}}
			</text>
			<text class="num">
				X {{data.num}}
			</text>
			<text class="price">
				￥{{data.price}}
			</text>
		</view>
		<view class="rateBox">
			<text>服务星评：</text>
			<uni-rate :value="value" size="20" color="#C4C4C4" activeColor="#000000" @change="change()" class="rate" />
		</view>
		<text class="label">服务评价：</text>
		<textarea placeholder="请输入您对服务的评价..." v-model="comment"></textarea>
		<view class="selBox">
			<view class="imgBox" v-for="(item,index) in imgArr" :key="index">
				<image :src="item.url" class="selImg"></image>
				<view class="del" @click="del(index)">
					X
				</view>
			</view>
			<view class="selectBox" @click="handleUpload()">
				<text class="selectLabel">+</text>
				<text class="selectLabel">选择图片</text>
			</view>
		</view>
		<view class="pay" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js'; // 引入 Vuex store
	import {
		mapState
	} from 'vuex';
	import {
		uploadImage
	} from '@/common/uploadImage.js'; // 导入上传函数
	export default {
		data() {
			return {
				value: 0,
				comment: '',
				imgArr: [],
				id: '',
				data: '',
				service_id: ''
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.service_id = options.service_id;
			this.$request.get(`orderRead?id=${this.id}`).then(res => {
				this.data = res.data.data;
			})
		},
		methods: {
			submit() {
				if (this.value == 0) {
					return this.$toast("请选择服务星评");
				}
				if (!this.comment) {
					return this.$toast("请输入您对服务的评价");
				}
				this.$request.post(`reviewSave`, {
					service_id: this.service_id,
					content: this.comment,
					score: this.value,
					order_id: this.id,
					thumb: this.imgArr
				}).then(res => {
					if (res.data.code != 10000) {
						return this.$toast(res.data.message);
					}
					this.$navto.navto("/pages/evaluate_result/evaluate_result")
				})
			},
			change(event) {
				this.value = event.value
			},
			del(index) {
				this.imgArr.splice(index, 1);
			},
			handleUpload() {
				const token = store.state.token;
				uni.chooseImage({
					success: (res) => {
						console.log(res)
						const tempFilePaths = res.tempFilePaths;
						console.log(tempFilePaths[0])
						uni.uploadFile({
							header: {
								"token": token,
								"Content-Type": "multipart/form-data",
							},
							url: 'https://juanjiahui.guguan.net/web/contractImage', // 上传接口地址
							filePath: tempFilePaths[0],
							name: 'image',
							success: (res) => {
								console.log(res)
								const {
									data
								} = res
								let datas = JSON.parse(data)
								console.log(datas.data.filePath)
								let temps = {
									url: datas.data.filePath
								}
								this.imgArr.push(temps);
							},
							fail: (res) => {
								this.$toast('上传失败，请重新上传')
							}
						});
					}
				});
			}
		},
		computed: {
			...mapState(['token']),
		},
	}
</script>

<style lang="scss" scoped>
	.pay {
		width: 670rpx;
		height: 90rpx;
		border-radius: 6rpx;
		background: #121212;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
		letter-spacing: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 100rpx;
		margin-left: 40rpx;
	}

	.selBox {
		width: 650rpx;
		margin-top: 25rpx;
		margin-left: 40rpx;
		display: flex;
		flex-wrap: wrap;

		.selectBox {
			width: 160rpx;
			height: 160rpx;
			border-radius: 15rpx;
			border: 1rpx solid #B3B3B3;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-bottom: 20rpx;
			margin-left: 40rpx;

			.selectLabel {
				font-size: 26rpx;
				margin-top: 10rpx;
			}
		}

		.imgBox {
			position: relative;
			width: 160rpx;
			height: 160rpx;
			border-radius: 15rpx;
			margin-left: 40rpx;
			margin-bottom: 20rpx;
		}

		.del {
			position: absolute;
			top: -10rpx;
			right: -10rpx;
			width: 30rpx;
			height: 30rpx;
			background-color: red;
			font-size: 20rpx;
			border-radius: 50%;
			color: #fff;
			text-align: center;
			line-height: 30rpx;
		}

		.selImg {
			width: 160rpx;
			height: 160rpx;
			border-radius: 15rpx;
		}
	}

	textarea {
		width: 670rpx;
		height: 380rpx;
		border-radius: 6rpx;
		background: #ffffff;
		border: 1rpx solid #B3B3B3;
		margin-left: 40rpx;
		padding: 30rpx;
		box-sizing: border-box;
		font-size: 24rpx;
	}

	.label {
		font-weight: 700;
		font-size: 28rpx;
		color: #121212;
		margin-left: 40rpx;
		margin-top: 47rpx;
		margin-bottom: 47rpx;
		display: inline-block;
		letter-spacing: 5rpx;
	}

	.rateBox {
		width: 670rpx;
		margin-left: 40rpx;
		padding-top: 47rpx;
		padding-bottom: 47rpx;
		border-bottom: 1rpx solid #E7E6E7;
		font-weight: 700;
		font-size: 28rpx;
		color: #121212;
		display: flex;
		letter-spacing: 5rpx;

		.rate {
			margin-left: 30rpx;
		}
	}

	.orderInfo {
		width: 100%;
		height: 260rpx;
		border-bottom: 20rpx solid #E7E6E7;
		display: flex;
		align-items: center;
		position: relative;

		.price {
			position: absolute;
			color: #121212;
			font-weight: 500;
			font-size: 26rpx;
			left: 288rpx;
			top: 168rpx;
			letter-spacing: 5rpx;
		}

		.num {
			position: absolute;
			color: #8e8e8e;
			font-weight: 500;
			font-size: 18rpx;
			left: 288rpx;
			top: 117rpx;
		}

		.name {
			position: absolute;
			font-weight: 700;
			width: 380rpx;
			font-size: 28rpx;
			color: #121212;
			left: 288rpx;
			top: 60rpx;
			letter-spacing: 5rpx;
		}

		.poster {
			width: 200rpx;
			height: 150rpx;
			margin-left: 30rpx;
			border-radius: 10rpx;
		}
	}

	.content {
		width: 100%;
		height: 100%;
		background-color: #fff;
		padding-bottom: 150rpx;
	}
</style>